---
slug: typescript #路径，不能重复
title: typescript # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

### 搭建

```shell
npm install typescript -g
```


#### 安装ts-node使得可在node环境下运行ts

```shell
npm install -g ts-node
```

#### 安装环境

```shell
npm install typescript rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D
```

* `typescript` ts的核心编译器，提供类型检查，语法转换

* `rollup` js模块打包器，专注于将多个模块打包成少数几种标准格式

* `rollup-plugin-typescript2` rollup插件，用于处理typescript文件，相比于原始插件，提供更详细的编译错误提示和缓存优化

* `@rollup/plugin-node-resolve` 解析node_modules中的第三方依赖，自动查找模块入口，支持Commonjs和ES模块的混合导入，避免手动处理路径问题

* `rollup-plugin-serve` 启动本地开发服务器，支持实时刷新


### 支持es6语法(import/export)

```json title="package.json"
{
"type": "module"
}
```


```js title="rollup.config.js"

import ts from 'rollup-plugin-typescript2';
import serve from 'rollup-plugin-serve';
import {nodeResolve} from '@rollup/plugin-node-resolve';
import {fileURLToPath} from 'url';
import {resolve} from 'path';
import {dirname}  from 'path';
const __filename = fileURLToPath(import.meta.url);//当前文件的绝对路径
const __dirname = dirname(__filename);//当前文件所在文件夹的绝对路径
//C:\Users\29665\Desktop\react\ts\rollup.config.js C:\Users\29665\Desktop\react\ts
//配置

export default {
    input: resolve(__dirname, 'src/index.ts'),//入口
    output: {//出口
        file: resolve(__dirname, 'dist/bundle.js'),//打包文件
        format: 'iife',//打包后生成立即执行函数,避免污染全局作用域
        sourcemap: true,//需要源码调试功能
    },
    plugins: [
        //解析第三方模块
        nodeResolve({
            extensions: ['.ts','.js'],
        }),
        //指定ts配置文件
        ts({
            tsconfig: resolve(__dirname, 'tsconfig.json'),
        }),
        serve({
            port: 8080,
            openPage:'/public/index.html',
            //rollup-plugin-serve 内部会自动将 openPage 的路相对于服务器根目录（contentBase）进行解析。
            //若未显式设置 contentBase，默认使用Rollup 的运行目录（通常是项目根目录）作为服务器根目录
            open:false
        })
    ]
}
```

## ts

##### 使用export{} 使得文件内的变量不会污染到全局

```ts
const name  = 'sd';

export {}

```


### 函数类型

> ts要求所有的属性都必须声明(使用修饰符)